<template>
    <el-container>
        <el-header>气象局合同管理系统</el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu text-color="#fff" :router="true" :default-active="active">
                    <el-sub-menu v-for="item in menuData" :index="item.label" :key="item.label">
                        <template #title> {{item.label}}</template>
                        <el-menu-item v-for="v in item.children" :key="v.path" :index="'/main/'+v.path">
                            <component :is="v.icon" style="width:14px ;height: 14px;"></component>
                            {{ v.label }}
                        </el-menu-item>  
                    </el-sub-menu>
                    <el-menu-item index="/login" @click="logout" >退出登录</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import { getMenu } from '@/api/api';
import { useRouteStore } from '@/stores/routeStore';
const router = useRoute();
const store=useRouteStore();
const active = ref("");
active.value = router.path;
const logout=()=>{
 sessionStorage.clear();
}
const menuData=ref();
onMounted(async()=>{
    const res=await getMenu({page:1,limit:20});
    const menu:any[]=[];
    let arr=res.data.data.filter(v=>store.menu.includes(v.label));
    arr.forEach(v=>{
        let obj=menu.find(item=>item.label === v.parent);
        if(obj){
            obj.children.push({
                label:v.label,
                icon:v.icon,
                path:v.path
            })
        }else{
            menu.push({label:v.parent,children:[{
                label:v.label,
                icon:v.icon,
                path:v.path
            }]})
        }
    })
    menuData.value=menu;
})
</script>
<style scoped>
.el-menu {
    --el-menu-active-color: pink;
    --el-menu-bg-color: blueviolet;
    --el-menu-hover-bg-color: burlywood;
}

.el-header {
    background-color: blueviolet;
    color: #fff;
}

.el-aside {
    background-color: blueviolet;
    height: calc(107vh - 60px);
}
</style>